import REST from "@module/Rest";
import urlHook from "@page/common/utils/urlHook";

export default class BrandSection extends React.Component {
    constructor() {
        super();
        this.deliveryTimeMap = {
            "7": "1周内",
            "14": "2周",
            "21": "3周",
            "30": "1个月",
            "60": "2个月",
            "61": "2个月以上",
            "1": "现货",
            "-1": "咨询供应商客服",
            "0":"无"
        };
        this.state = {
            isShowTip: false,
            brands: [
                {
                    title: "品牌",
                    txt: "Greniner（格瑞纳）一级代理"
                },
                {
                    title: "货期",
                    txt: "一周"
                },
                {
                    title: "单位",
                    txt: "盒"
                },
                {
                    title: "货号",
                    txt: "JB908211"
                },
                {
                    title: "CAS号",
                    txt: "237471-34-9"
                }
            ]
        };
        this.suppId = $state.params && $state.params.suppId;
    }

    componentDidMount() {}

    //运费规则跳转
    jump = () => {
        window.open(urlHook.helpdetails, "_blank");
    };

    render() {
        const { brands, isShowTip } = this.state;
        const { product, carryFee,productCount } = this.props;
        const {
            brandName,
            deliveryTime,
            unit,
            productNum,
            casNo,
            brand,
            agencyName
        } = product;

        return (
            <div className={"detail-top-detail-brands"}>
                <div>
                    <div className={"detail-top-detail-brand-item0"}>
                        <p className={"detail-top-detail-brand-item-title"}>
                            {"品牌"}
                        </p>
                        <p className={"detail-top-detail-brand-item-p zem_m-w-130"}>
                            {brandName || brand || "无"}
                        </p>
                        <p
                            className={"detail-top-detail-brand-item-p"}
                            style={{
                                marginLeft: 10,
                                marginTop: 0,
                                color: "#0093eb"
                            }}
                        >
                            {agencyName || ""}
                        </p>
                        
                    </div>
                    <div className={"detail-top-detail-brand-item2"}>
                        <p className={"detail-top-detail-brand-item-title"}>
                            {"货期"}
                        </p>
                        <p className={"detail-top-detail-brand-item-p"}>
                            {`${this.deliveryTimeMap[deliveryTime + ""]}`}
                        </p>
                    </div>
                </div>

                <div>
                    <div className={"detail-top-detail-brand-item0"}>
                        <p className={"detail-top-detail-brand-item-title"}>
                            {"货号"}
                        </p>
                        <p className={"detail-top-detail-brand-item-p"}>
                            {productNum}
                        </p>

                        {this.suppId == "5" && (
                            <div className="zen_ps-re">
                                {isShowTip && (
                                    <Tip
                                        id={productNum}
                                        carNum={productCount}
                                        isShow={isShowTip}
                                        cb={isShow => {
                                            this.setState({
                                                isShowTip: isShow
                                            });
                                        }}
                                    />
                                )}
                                <span
                                    className="zen_fs-12 zen_m-l-5 zen_cur-p zen_0093EB"
                                    onClick={() => {
                                        this.setState({ isShowTip: true });
                                    }}
                                >
                                    查询货期
                                </span>
                            </div>
                        )}
                    </div>
                    <div className={"detail-top-detail-brand-item2"}>
                        <p
                            className={
                                "detail-top-detail-brand-item-title4"
                            }
                        >
                            {"CAS号"}
                        </p>
                        <p className={"detail-top-detail-brand-item-p"}>
                            {casNo ? casNo : "无"}
                        </p>
                    </div>
                </div>
                <div>
                    <div className={"detail-top-detail-brand-item1"}>
                        <p className={"detail-top-detail-brand-item-title"}>
                            {"单位"}
                        </p>
                        <p className={"detail-top-detail-brand-item-p"}>
                            {unit}
                        </p>
                    </div>
                    {(carryFee || carryFee === 0) && global.hasLogin && (
                        <div
                            className={
                                "detail-top-detail-brand-item1 zen_m-r-0"
                            }
                        >
                            <p className={"detail-top-detail-brand-item-title"}>
                                {"运费"}
                            </p>
                            <p className={"detail-top-detail-brand-item-p"}>
                                {`￥${Filter.float(carryFee, 2)}`}
                            </p>
                            <div style={{ marginTop: -3 }} onClick={this.jump}>
                                <span className="zen_fs-12 zen_m-l-5 zen_cur-p zen_0093EB">
                                    运费规则
                                </span>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        );
    }

    getdeliveryTimeText(deliveryTime) {
        if (deliveryTime == "7") {
            return "1周内";
        } else if (deliveryTime == "14") {
        }
    }
}

class Tip extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "查询中...",
            oheight: 44
        };
    }

    componentDidMount() {
        this.priceAvailability();
    }

    //获取货期西格玛
    priceAvailability() {
        let url = `/shop/store/product/priceAvailability`;
        let params = {
            productCode: this.props.id,
            quantity: this.props.carNum || 1
        };
        REST.post(url, params).then(
            data => {
                let msg = data.code=='1'?(data.data||'无'):"请重新查询";
                this.setState({ message: msg}, () => {
                    const { tip } = this.refs;
                    const oheight = tip.offsetHeight;
                    this.setState({ oheight });
                });
            },
            error => {}
        );
    }

    hide = (e, isShow) => {
        if (e.target && e.target.id !== "modalBg") {
            return;
        }
        isShow = false;
        this.props.cb(isShow);
    };

    render() {
        const { message,oheight } = this.state;
        const { isShow } = this.props;
        return (
            <React.Fragment>
                <div
                    ref="tip"
                    className="h-popoverStyle-popover h-popoverStyle-main-top"
                    style={{
                        width: "240px",
                        minHeight: "44px",
                        top: `-${oheight + 20}px`,
                        left: "-95px",
                        display: "block"
                    }}
                >
                    <div
                        className="h-popoverStyle-rect"
                        style={{ left: "115px" }}
                    />
                    <div
                        className="h-popoverStyle-contentbox"
                        style={{ width: "240px", minHeight: "44px" }}
                    >
                        <div
                            className="h-popoverStyle-content"
                            dangerouslySetInnerHTML={{ __html: message }}
                        />
                    </div>
                </div>
                <div
                    onClick={this.hide.bind(this, isShow)}
                    id="modalBg"
                    className="zen_ps-fix zen_t-0 zen_b-0 zen_l-0 zen_r-0"
                    style={{ zIndex: "1000" }}
                />
            </React.Fragment>
        );
    }
}
